<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogDetail.css">
    <link rel="stylesheet" href="css/blogList.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="jquery.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

</head>
<body>
    <!--    导航栏-->
    <div class="nav">
        <img src="./image/person_Blog.png" alt="">
        <span>我的博客系统</span>
        <div class="spacer"></div>
        <a href="main.html">主页</a>
        <a href="edit.html">写博客</a>
    </div>

    <div class="container">
        <!--        左侧个人信息-->
        <div class="left">
            <div class="card">
                <img id="photo">
                <h3 id="username"></h3>
                <a href="" id="github">github 地址</a>
                <div class="bottom">
                    <div class="counter" id="article">
                        <span>作者文章</span>
                        <span id="count"></span>
                    </div>
                    <div class="counter" id="fansList">
                        <span>粉丝</span>
                        <span id="fans"></span>
                    </div>
                </div>

                <button id="concern" style="display: none">
                    <a href="">关注</a>
                </button>
                <button id="cancel" style="display: none">
                    <a href="">取消关注</a>
                </button>
                <button id="chat" style="display: none">
                    <a href="">私聊</a>
                </button>
            </div>
        </div>
        <!--        右侧内容-->
        <div class="right">
            <div class="editBlog">
                <a href="#" id="edit" style="display: none">编辑博客</a>
                <a href="#" id="delete" style="display: none">删除博客</a>
            </div>
            <div class="blog-container">
                <!-- 标题 -->
                <h3 id="title"></h3>
                <!-- 日期 -->
                <div class="date" ></div>
                <!-- 博客正文 -->
                <div id="content" style="color: black ; background-color: rgb(255, 255, 255); font-family: '黑体'; border-radius: 5px; "></div>
            </div>
        </div>
    </div>

<!--    获取详情页信息-->
    <script>
        $.ajax({
            type: 'get',
            url: 'blog' + location.search,
            contentType: "application/json",
            success: function (body) {

                let title = document.querySelector('#title');
                title.innerHTML = body.title;
                let date = document.querySelector('.date');
                date.innerHTML = body.postTime;
                // 内容格式带有Markdown格式,需要解析得到
                editormd.markdownToHTML('content', {
                    markdown: body.content
                })
            }
        })
    </script>

    <script src="js/common.js"></script>
<!--    获取左侧作者信息-->
    <script>
        $.ajax({
            type: 'get',
            url: 'author' + location.search,
            contentType: 'application/json',
            success: function (body) {
                getUserMessage(body);
                getUserBlogList(body.userId);
                getFansList(body.fans)
            }
        })

        let chat = document.querySelector("#chat");
        let chatA = document.querySelector("#chat a");
        chat.onclick = function () {
            let url = location.search;
            if (url.indexOf('?') != -1){
                url = url.substr(1);
                strs = url.split('&');
                for (let i = 0; i < strs.length; i++) {
                    if (strs[i].split('=')[0] == 'authorId'){
                        url = strs[i];
                        break;
                    }
                }
            }
            chatA.href = "chat.html"+"?"+url;
        }
    </script>
<!--    是否显示关注  点击关注 -->
    <script>
        // 是否显示关注
        // 是否为自己, 是否已经关注过了
        $.ajax({
            type: 'post',
            url: 'fans' + location.search,
            success: function (body) {
                if (body == 'yes'){
                    $("#concern").show();
                    $("#chat").show();
                }else if (body == 'concerned'){
                    $("#cancel").show();
                    $("#chat").show();
                }
            }
        })

        // 点击关注
        let concern = document.querySelector("#concern");
        concern.onclick = function () {
            $.ajax({
                type: 'post',
                url: 'fans' + location.search + "&concern=yes",
                success: function (body) {
                    if (body == 'yes'){
                        location.reload();
                    }
                }
            })
        }
        // 点击取消关注
        let cancel = document.querySelector("#cancel");
        cancel.onclick = function () {
            $.ajax({
                type: 'post',
                url: 'fans' + location.search + "&cancel=yes",
                success: function (body) {
                    if (body == 'yes'){
                        location.reload();
                    }
                }
            })
        }
    </script>
<!--    是否显示删除和编辑键-->
    <script>
        let editBlog = document.querySelector("#edit");
        let deleteBlog = document.querySelector("#delete");
        // 发送请求核查是否为当前用户
        $.ajax({
            type: 'get',
            url: 'user' + location.search,
            success: function (body) {
                if (body === 'same'){
                    $("#edit").show();
                    $("#delete").show();
                }
            }
        })

        // 编辑博客
        editBlog.onclick = function () {
            editBlog.href = 'edit.html' + location.search;
        }

        // 删除博客
        deleteBlog.onclick = function () {
            var flag = confirm("确定要删除这篇博客吗?");
            if (flag === true){
                $.ajax({
                    type: 'get',
                    url: 'blog' + location.search + "&delete=yes",
                    dataType: 'text',
                    success: function (body) {
                        if (body == 'success'){
                            alert("删除成功!");
                            location = 'main.html'
                        }
                    }
                })
            }
        }
    </script>
</body>
</html>